<template>
	<x-border :title="title" type="focus" icon="icon-5333-wubfen" v-if="title">
		<div class="product-activity" v-if="!isEdit ">
			<el-tabs tab-position="left" v-model="activeName" v-if="attributes">
				<el-tab-pane v-for="(item, index) in attributes" :key="index" :label="item.name" :name="item.key">
					<span slot="label"><i class="el-icon-date" :class="item.iconName"></i> {{item.name}}</span>
					<edit v-if="item.key === activeName" :attribute="item" ref="activityEdit"></edit>
				</el-tab-pane>
			</el-tabs>
		</div>
		<div class="product-activity" v-else>
			<edit :attribute="attributeSelect" v-if="attributeSelect" :isEdit="isEdit"></edit>
		</div>
	</x-border>
</template>

<script>
	import edit from './edit'
	import ala from 'ala'
	export default {
		data() {
			return {
				attributes: null,
				activeName: 'BuyPermisionActivity',
				attributeSelect: null, // 当前活动特性,
				title: null // 标题
			}
		},
		components: {
			edit
		},
		props: {
			isEdit: {
				default: false
			},
			activity: {}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				// 从缓存中读取，调试时清空缓存,方便调试
				if (ala.isBuild() === false) {
					ala.localRemove('init_activityAttributes')
				}
				this.activeName = this.activity
				if (!this.activeName) {
					this.activeName = 'BuyPermisionActivity'
				}
				this.attributes = await this.$api.activityAttributes()
				this.attributeSelect = this.attributes.find(r => r.key === this.activeName)
				if (this.isEdit === false) {
					this.title = '活动设置'
				} else {
					this.title = this.attributeSelect.name
				}
			}
		}
	}
</script>


<style lang="scss" scoped>
	@import "~./styles/product.scss";
</style>